<template>
  <div class="interaction-sender">
    <div class="header">
      <span>内置数据交互流</span>
    </div>
    <div v-if="interaction_stream" class="body">
      <Tooltip v-if="streamItem" content="开启之后，此组件将会作为内置交互流的发起者，当组件触发了可交互事件时，会发起一次交互流"
               placement="left" max-width="200">
        <Checkbox v-model="streamItem.interaction_sender">开启发送权限</Checkbox>
      </Tooltip>
      <p v-else class="color-red" style="text-align: center;">
        未找到对应触发事件的相关配置，请尝试再次升级组件
      </p>

      <table class="fields-map-table">
        <thead>
        <tr>
          <th>数据源字段</th>
          <th>绑定到交互变量</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(fieldsMapItem, index) in tmpFieldsMap" :key="index">
          <td><Input size="small" v-model="fieldsMapItem.fieldName" @on-blur="updateFieldsMap"/></td>
          <td><Input size="small" v-model="fieldsMapItem.bindingVariateName" @on-blur="updateFieldsMap" :placeholder="fieldsMapItem.remark"/></td>
          <td style="width: 40px; text-align: center;">
            <a href="javascript:;" class="color-white" @click="deleteFieldsMapItem(index)"><Icon type="md-trash" /></a>
          </td>
        </tr>
        <tr v-show="addFieldsMapFormVisible">
          <td colspan="3" style="padding: 5px 10px 5px 10px;">
            <Form ref="form" :model="fieldsMapFormData" :label-width="100">
              <FormItem label="数据源字段" prop="fieldName">
                <Input size="small" v-model="fieldsMapFormData.fieldName"/>
              </FormItem>
              <FormItem label="绑定到交互变量" prop="bindingVariateName">
                <Input size="small" v-model="fieldsMapFormData.bindingVariateName"/>
              </FormItem>
              <FormItem label="备注" prop="remark">
                <Input size="small" v-model="fieldsMapFormData.remark"/>
              </FormItem>
              <FormItem>
                <Button class="m-r-5px" type="primary" size="small" @click="addFieldsMapItem">保存</Button>
                <Button type="text" size="small" @click="closeAddFieldsMapForm">关闭</Button>
              </FormItem>
            </Form>
          </td>
        </tr>
        <tr>
          <td colspan="3">
            <PageAllBindingVariateNamesPoptip></PageAllBindingVariateNamesPoptip>

            <div class="float-right">
              <Button :disabled="!streamItem" v-if="canAddFieldsMap" size="small" type="text" @click="addFieldsMapFormVisible = !addFieldsMapFormVisible">新增字段映射</Button>
            </div>
          </td>
        </tr>
        </tbody>
      </table>

    </div>
    <div v-else class="not-stream-message">当前组件版本未支持内置交互流，请升级组件</div>
  </div>
</template>

<script>

import _ from 'lodash'

import {createHelpers} from 'vuex-map-fields';

const {mapFields} = createHelpers({
  getterType: 'designer/getLayoutItem',
  mutationType: 'designer/updateLayoutItem',
});

export default {
  name: "InteractionSender",
  props: {
    interactionKey: {
      type: String,
      default: '',
      require: true
    },
    canAddFieldsMap: { // 是否可以新增字段映射
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      tmpFieldsMap: [],
      addFieldsMapFormVisible: false,
      fieldsMapFormData: {
        fieldName: '',
        bindingVariateName: '',
        remark: ''
      }
    }
  },
  mounted() {
    if (this.streamItem) {
      this.tmpFieldsMap = this.$PnUtil.deepClone(this.streamItem.interaction_fieldsMap)
    }
  },
  methods: {
    addFieldsMapItem () {
      this.tmpFieldsMap.push(this.$PnUtil.deepClone(this.fieldsMapFormData));
      this.streamItem.interaction_fieldsMap = this.$PnUtil.deepClone(this.tmpFieldsMap);
      this.$refs.form.resetFields()
    },
    closeAddFieldsMapForm () {
      this.addFieldsMapFormVisible = false;
      this.$refs.form.resetFields()
    },
    deleteFieldsMapItem (index) {
      this.$Modal.confirm({
        title: '提醒',
        content: '确定删除此映射配置吗？',
        onOk: () => {
          this.tmpFieldsMap.splice(index, 1);
          this.streamItem.interaction_fieldsMap = this.$PnUtil.deepClone(this.tmpFieldsMap)
        }
      });
    },
    updateFieldsMap () {
      this.streamItem.interaction_fieldsMap = this.$PnUtil.deepClone(this.tmpFieldsMap);
      this.$Message.success('映射配置已生效')
    }
  },
  computed: {
    ...mapFields({

      componentId: 'component.id',
      interaction_stream: 'component.compConfigData.interaction_stream'

    }),
    streamItem () {
      return _.find(this.interaction_stream, {interaction_key: this.interactionKey})
    }
  },
  watch: {
    'componentId': {
      handler: function (val, oldVal) {
        if (val != oldVal) {
          this.tmpFieldsMap = this.$PnUtil.deepClone(this.streamItem.interaction_fieldsMap)
        }
      }
    },
    'streamItem.interaction_fieldsMap': {
      handler: function (val, oldVal) {
        if (oldVal == undefined) {
          this.tmpFieldsMap = this.$PnUtil.deepClone(this.streamItem.interaction_fieldsMap)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.interaction-sender {
  background-color: #616161;
  border: 2px solid #424242;
  border-radius: 4px;
  margin-bottom: 10px;
  .header {
    padding: 5px 10px 5px 10px;
    background-color: #2196f3;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .body {
    padding: 10px;
  }
  .not-stream-message {
    padding: 8px;
    text-align: center;
    color: #f44336;
  }
}

table.fields-map-table {
  width: 100%;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
  margin-top: 10px;
}

table.fields-map-table th {
  border-width: 1px;
  padding: 5px;
  border-style: solid;
  border-color: #757575;
  background-color: #363636;
  color: #fafafa;
}

table.fields-map-table td {
  border-width: 1px;
  padding: 5px;
  border-style: solid;
  border-color: #757575;
  background-color: #424242;
  color: #fafafa;
}
</style>
